<template>
  <div class="main">
    <div class="menu">
      <TopMenu />
    </div>
    <div id="map" />
  </div>
</template>
<script>
// const QMap = require('@/utils/qmap.js')
// import '@/utils/qmap.css'
// console.log(111, QMap)
import TopMenu from '@/components/TopMenu'
// import TopMenu from '@/components/TopMenu/TopMenu.vue'
export default {
  components: { TopMenu },
  data() {
    return {
      map: null,
      fly: null,
      labelManager: null,
      position: null,
      lavel: null
    }
  },
  mounted() {
    this.init()
    // this.addLabelIcon();
    this.addLabelTextIcon()
  },
  methods: {
    init() {
      this.map = new QMap.Map('map', {
        // imageryProvider: new QMap.GoogleImageryProvider()
        imageryProvider: new QMap.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          enablePickFeatures: false
        })
      })
      this.map.scene.camera.setView({
        destination: new QMap.Cartesian3.fromDegrees(
          79.840364, 31.675754,
          2000
        )
      })
      this.fly = new QMap.Fly(this.map, {
        complete: () => {}
      })
      this.labelManager = new QMap.LabelManager(this.map)
      this.position = new QMap.Cartesian3.fromDegrees(79.840364, 31.675754)
      // this.position1 = new QMap.Cartesian3.fromDegrees(120.660728, 29.286384)
      this.label
    },
    addLabelTextIcon() {
      this.addPointPopup()
      if (this.labelManager) {
        if (this.label) {
          this.labelManager.remove(this.label)
          this.label = null
        }
        this.imgUrl = './mart.png'
        this.label = this.labelManager.addLabelTextIcon(
          this.position,
          this.imgUrl,
          '东 噶 遗 址',
          {
            id: 1,
            scale: 0.35,
            textTop: 55,
            textLeft: 150,
            fontColor: new QMap.Color(1, 1, 1, 1),
            font: '35px Microsoft YaHei'
          }
        )
      }
    },
    addPointPopup() {
      const handler1 = new QMap.ScreenSpaceEventHandler(this.map.scene.canvas)
      const _this = this
      handler1.setInputAction(function(evt) {
        var pick = _this.map.scene.pick(evt.position)
        console.log(pick.id)
        _this.$router.push({ name: 'Chart', query: { id: pick.id }})
      }, QMap.ScreenSpaceEventType.LEFT_CLICK)
    }
  }
}
</script>
<style lang="scss" scoped>
$a: 100%;
.main,
#map {
  width: $a;
  height: $a;
  position: absolute;
}
.menu {
  position: absolute;
  width: $a;
  height: 20%;
  top: 0;
  z-index: 1;
}
</style>
